@import('_partial/reset.styl')
// CSS reset
global-reset()
reset-html()

@import('_partial/variables.styl')
@import('_partial/markdown.styl')
@import('_partial/highlight.styl')
@import('_partial/head_nav.styl')

*
    box-sizing: border-box
body,html
    height:100%
    font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
.logo
    float:left
    padding: 0 20px 0 0px
    font-size: 24px
    font-weight: 500
    color: #563d7c
    img 
        vertical-align: middle
        margin: -4px 0 0 0
        max-height: 27px

.container
    padding-left: 15px
    padding-right: 15px
    width: 1124px
    margin 0 auto
    @media mq-tablet
        width auto
    @media mq-mobile
        width auto
    &:before
        display: table
        content: " "
    &:after
        display: table
        content: " "
        clear: both

.bs-docs-header
    background:#445588
    background-image: linear-gradient(to bottom,#445588 0,#458 100%)
    background-repeat: repeat-x
    position: relative
    padding: 88px 0
    color: #A3AFD4
    font-size: 24px
    text-align: left
    text-shadow: 0 1px 0 rgba(0,0,0,.1)
    @media mq-mobile
        padding: 28px 0
    h1,p 
        margin-right: 380px
        @media mq-mobile
            margin-right: 0
        @media mq-tablet
            margin-right 50px
    h1
        color: #fff
        font-family: inherit
        font-weight: 500
        margin: .67em 0
        margin-bottom: 10px
        margin-top: 0
        font-size: 60px
        line-height: 1
        text-align: left
        @media mq-mobile
            margin: .37em 0
            text-align center
    p 
        margin-bottom: 0
        font-weight: 300
        line-height: 1.4
.navbar-line
    border-bottom: 1px solid #E9E9F1

.markdown-body
    overflow: auto
.page-toc
    width: 200px
    float: right
    width: 220px
    background: #fff
    padding: 9px 0 25px 20px 
    margin-top: 35px
    border-left: 1px solid #EEE
    font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,sans-serif !important
    @media mq-tablet
        width auto
    @media mq-mobile
        display none
    ul
        list-style-type: none
        margin: 0
        a 
            display: block
            padding: 3px 0
            color: #151515
            text-decoration: none
            font-weight:bold
            line-height: 16px
            font-size: 14px
            &:hover
                color:red
                text-decoration: underline
        li 
            padding-left:3px
            text-align:left
            float: initial
        ul
            margin:0 0 0 10px
            list-style-type: square
            padding: 0 0 0 9px
            li 
                a 
                    font-size:90%
                    font-weight:normal
                    border-bottom:0
.copyright
    border-top: 1px dashed #E9E9E9
    padding: 6px 0 5px 2px
    margin: 32px 0 0 0
    line-height: 16px
    font-size: 12px
    color: #dfdfdf
    a 
        color: #D6DDF8
        text-decoration: underline
        &:hover
            color:#333

.forkgithub
    position: absolute
    z-index: 2
    right: 0
    background: url("../img/forkgithub.png") 14px -15px no-repeat
    @media mq-mobile
        display none
    @media mq-tablet
        background-image inherit
    a 
        display: block
        width: 149px
        height: 1px
        padding-top 149px
        overflow hidden
        @media mq-tablet
            padding-top 0
            // height: 149px
            height 50px
            
